Skip to content
This repository has been archived by the owner on Oct 20, 2023. It is now read-only.

Timeline UI Updates #89

Merged
merged 20 commits into from
Mar 8, 2023
Merged

Timeline UI Updates #89

merged 20 commits into from
Mar 8, 2023

Conversation

arniebradfo
Copy link
Collaborator

@arniebradfo arniebradfo commented Mar 6, 2023

Description

Update the timeline UI

  • remove the dependency on 'react-spring' in favor of css transitions
    • refactored scrubber to support this
  • rounding and pixel aligning timeline svg elements using d3 scaleLinear.interpolate(interpolateRound)
    • Setting timeline state now uses store.campaign.timeline.setScrubberTimeAny(time) rather than ...setScrubberTimeExact(time)
  • update timeline bar over Popover UI - now named TimelineBarHoverPopover
    • consolidated components
    • removed passing state between components
    • updated style and layout
    • updated open/close interaction
  • update other timeline styles and quirks

Testing

Timeline Interactions

  • drag, play, pause, skip forward/back, 'All Time' toggle
  • in both explorer and presentation mode

Screenshots

Before & After (notice blurry vs pixel aligned svg)
Screen Shot 2023-03-05 at 4 23 30 PM
Screen Shot 2023-03-05 at 4 21 21 PM

cy.get('[cy-test=timeline-animated-line]')
.invoke('attr', 'x1')
cy.get('[cy-test=timeline-scrubber]')
.invoke('attr', 'x1') // @QA - we are now moving the scrubber using `style="transform:translateX(00px)"`, not `x1` & `x2`
Copy link
Collaborator Author

@arniebradfo arniebradfo Mar 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sang2925 && || @ccarpenter28,
I've updated the scrubber referenced in this test to change its position using transform rather than the x1 and x2 attributes.

style={{ transform: `translateX(${xVisual + 0.5}px)` }}

@arniebradfo arniebradfo requested review from sharplessHQ and GoldingAustin and removed request for sharplessHQ March 7, 2023 18:16
@arniebradfo arniebradfo changed the title WIP - Timeline UI Updates Timeline UI Updates Mar 7, 2023
@arniebradfo arniebradfo merged commit fd01bee into develop Mar 8, 2023
@arniebradfo arniebradfo deleted the BLDSTRIKE-570-Timeline-UI branch March 8, 2023 18:43
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants